<template>
  <div>
    <myDivider name="居民信息管理"></myDivider>
    <div class="Top">
      <div style="display: flex;">

        <el-cascader change-on-select placeholder="选择房间查询" clearable style="width: 300px;" v-model="keyRoom" :props="props"
        @change="keyRoomChange"></el-cascader>
        <el-input style="width: 200px;margin-left: 10px;" v-model="keywords" placeholder="姓名/手机号"
          @keyup.enter.native="getTableList" clearable></el-input>

        <el-button type="primary" style=" margin-left: 15px" @click="SouSuo">查询</el-button>
        <el-button style="margin-left: 15px" @click="reset">重置</el-button>


      </div>
      <div style="width: 100%;display: flex;justify-content: flex-end;">
        <el-button type="primary" @click="ToBatchImport">批量导入</el-button>
      </div>
    </div>
    <el-table class="tableBox" :data="TableData" style="width: 100%">
      <el-table-column align="center" prop="rqName" label="小区名称" min-width="200px">
      </el-table-column>
      <el-table-column align="center" prop="buildingName" label="楼宇" min-width="100px">
      </el-table-column>
      <el-table-column align="center" prop="unitCode" label="单元" min-width="100px">
        <template slot-scope="scope">
         {{ scope.row.unitCode + '单元' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="roomName" label="房间" width="200px">
      </el-table-column>
      <el-table-column align="center" prop="name" label="居民姓名" min-width="150px">
      </el-table-column>
      <el-table-column align="center" prop="phone" label="手机号" min-width="150px">
      </el-table-column>
      <el-table-column align="center" prop="customerType" label="身份" width="90px">
        <template slot-scope="scope">
         {{ scope.row.customerType=='1'?'业主':
           scope.row.customerType=='2'?'亲友':
            scope.row.customerType=='3'?'租户':'-'
         }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createUserName" label="经办人" min-width="150px">
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" min-width="170px">
      </el-table-column>
      <!-- <el-table-column align="center" label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <div class="textBtn">
            <el-row>
              <el-col class="el" :span="6">
                <span style="color: #5fadff;cursor: pointer;font-weight: 600;" @click="updateClick(scope.row)">编辑</span>
              </el-col>
            </el-row>
          </div>
        </template>
      </el-table-column> -->
    </el-table>


    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="totalSize" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>





<script>
import MyUploadFileNotDetele from '@/components/upload/MyUploadFileNotDetele'
export default {
  components: {
    MyUploadFileNotDetele,
  },
  data() {
    return {

      keyRoom: [],
      keywords: '',
      // 主要表格==================
      TableData: [{ name: '1', img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' }], //用户数据
      pageNum: 1,
      pageSize: 10,
      totalSize: 0,
      logOnUser: {},
      // ==================主要表格
      props: {
        value: 'id',
        label: 'name',
        lazy: true,
        
        lazyLoad: async (node, resolve) => {
          console.log(node, '级联选择器');
          const { level } = node;
          if (level == 0) {
            let res = await this.$api.events.getCellList(
              {
                name: '',
                pageNum: 1,
                pageSize: 10000,
                roleIds: this.logOnUser.roleIds
              })
            if (res.code == 200) {
              console.log(res.data.list, 'ahhh');
              resolve(res.data.list)

            } else {
              this.$message.error(res.message)
            }
          } else if (level == 1) {
            // 获取楼宇列表
            let res = await this.$api.events.getBuildingList({
              "residentialQuartersId": node.path[0]
            })
            if (res.code == 200) {
   
              resolve(res.data.list)
            } else {
              this.$message.error(res.message)
            }
          } else if (level == 2) { //获取单元列表
   
            let res = await this.$api.axios.post('/business/room/getUnitCodeListByBuildingId', {
              "buildingId": node.path[1]
            })
            if (res) {
              let arr = []
              res.data.forEach(el => {
                arr.push({
                  name: el.name,
                  id: el.value,
                })
              })
              resolve(arr)
            }
          } else if (level == 3) { //获取楼层
            let res = await this.$api.axios.post('/business/room/getFloorsListByBuildingId', {
              "buildingId": node.path[1], //楼宇id  必填
              "unitCode": node.path[2]
            })
            if (res) {
              let arr = []
              res.data.forEach(el => {
                arr.push({
                  name: el.name,
                  id: el.value,
                })
              })
              resolve(arr)
            }
          } else if (level == 4) {
            let res = await this.$api.axios.post('/business/room/getRoomListByFloors', {
              "buildingId": node.path[1], //楼宇id  必填
              "unitCode": node.path[2],
              "floors": node.path[3] //楼层  必填
            })
            if (res) {
              if (res.data.length > 0) {
                let arr = []
                res.data.forEach(el => {
                  arr.push({ ...el, leaf: true })
                })
                resolve(arr)
              } else {
                resolve([{
                  name: '暂无房间',
                  id: 0,
                  disabled: true,
                  leaf: true
                }])
              }

            }
          } else {
            resolve()
          }

        }
      },

    };
  },
  async activated() {
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.reset() // 重置清空 然后查询列表
  },
  methods: {
    keyRoomChange(val) {
      this.SouSuo()
      if (val.length == 0) return
      this.$nextTick(() => {
        const dom = document.getElementsByClassName("el-radio is-checked");
        //这里我把dom打出来看了 最后一个选项才是我选中的节点 即[length-1] 有的博主写的是 第一个元素 即[0] 大家自行尝试
        let radioDom = dom[dom.length - 1];
        const brother = radioDom.nextElementSibling;
        brother.click();
      });
    },
    ToBatchImport() {
      this.$router.push('/batchImport?name=居民信息导入')
    },
    // 列表 =====================================================================
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.pageNum = 1
      this.keyRoom = []
      this.keywords = ''
      this.getTableList()
    },
    //按条件查询菜单列表
    async getTableList() {
      let residentialId
      let buildingId
      let unitCode
      let floors
      let roomId
      if (this.keyRoom.length == 0) {
        residentialId = 0
        buildingId = 0
        unitCode = ''
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 1) {
        residentialId = this.keyRoom[0]
        buildingId = 0
        unitCode = ''
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 2) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = ''
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 3) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = this.keyRoom[2]
        floors = ''
        roomId = 0
      }
      if (this.keyRoom.length == 4) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = this.keyRoom[2]
        floors = this.keyRoom[3]
        roomId = 0
      }
      if (this.keyRoom.length == 5) {
        residentialId = this.keyRoom[0]
        buildingId = this.keyRoom[1]
        unitCode = this.keyRoom[2]
        floors = this.keyRoom[3]
        roomId = this.keyRoom[4]
      }
      let res = await this.$api.axios.post('/business/customerRoomRelation/list', {
        "keywords": this.keywords, //姓名、手机号
        "residentialId": residentialId, //小区id
        "buildingId": buildingId, //楼宇id
        "unitCode": unitCode, //单元
        "floors": floors, //层
        "roomId": roomId, //房间id   
        "pageSize": this.pageSize,
        "pageNum": this.pageNum
      })
      if (res) {
        if (res.data.list.length == 0 && this.pageNum != 1) {
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.TableData = res.data.list;
        this.totalSize = res.data.total;
      }

    },
    // ======================================================================列表

  },


};
</script>
<style scoped lang="less">
.tableBox {
  margin-top: 100px;

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #fafafa;
      }
    }
  }
}

.popTableStyle {
  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #efefef;
      }
    }

    .el-table__body tr.current-row>td.el-table__cell {
      background-color: #409eff;

      .cell {
        color: white;
        font-weight: 600;
      }
    }
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {

      // border-left: 1px solid #aaa;
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}



.Top {
  position: relative;

}
</style>